<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!--    <link rel="stylesheet" th:href="@{https://unpkg.com/element-ui/lib/theme-chalk/index.css}">-->
    <link rel="stylesheet" th:href="@{/el/element.css}">
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>

    <script th:src="@{/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <script th:src="@{/js/wangEditor.min.js}" type="text/javascript"></script>
    <title></title>
</head>
<style>
    .text {
        font-size: 14px;
    }
    .cart_body{
        padding-top: 5px;
        padding-left: 5px;
    }
    .cartbox{
        margin-top: 5px;
        margin-bottom: 5px;
    }
    p{
        margin:6px;
    }
     /deep/.el-card__body{
        padding: 0;
    }

    .box-card {
        width: 90%;
        margin-bottom: 5px;
    }
</style>
<body>
    <div id="app">

        <el-container>
            <el-header>
                <div th:include="~{common/homePage::head}"></div>
            </el-header>
            <el-container>
                <el-aside width="250px">
                    <div th:include="~{common/sidebar::sidebar}"></div>
                </el-aside>
                <el-main style="height: 1400px">
                    <el-card class="box-card" v-for="blogx in blogs" >
                        <div slot="header" class="clearfix" style="cursor:pointer">
                            <span v-html="blogx.title" @click="showContext(blogx.id)"></span>
                        </div>
                        <div class="text">
                            <p>摘要：</p>
                            <p v-html="blogx.summary"></p>
                            <el-button type="text" @click="showContext(blogx.id)">查看全文</el-button>
                            <div style="float: right" class="cartbox">
                                作者:<span v-html="blogx.author"></span>&nbsp;
                                发布时间:<span >{{blogx.createTime}}</span>&nbsp;

                                <template  th:if="${session.SPRING_SECURITY_CONTEXT}==null">
                                    <el-button @click="likeadd(blogx.id)" circle>
                                        <el-image
                                                style="width: 15px; height: 15px"
                                                src="/img/dianzan.png"
                                                fit="fill">
                                        </el-image>
                                        <span>{{blogx.likenums}}</span>
                                    </el-button>
                                </template>
                                <template th:if="${session.SPRING_SECURITY_CONTEXT}!=null">
                                    <template v-if="blogx.likes">
                                        <el-button @click="likeadd(blogx.id)" circle>
                                            <el-image
                                                    style="width: 15px; height: 15px"
                                                    src="/img/dianzan.png"
                                                    fit="fill">
                                            </el-image>
                                            <span>{{blogx.likenums}}</span>
                                        </el-button>
                                    </template>
                                    <template v-else>
                                        <el-button @click="likeadd(blogx.id)" circle type="info">
                                            <el-image
                                                    style="width: 15px; height: 15px"
                                                    src="/img/dianzanok.png"
                                                    fit="fill">
                                            </el-image>
                                            <span>{{blogx.likenums}}</span>
                                        </el-button>
                                    </template>
                                </template>
                                <el-tag>阅读量:{{blogx.readvolume}}</el-tag>&nbsp;
                                <el-tag type="success">评论数:{{blogx.review}}</el-tag>&nbsp;
                            </div>
                        </div>
                    </el-card>

                    <el-footer style="margin-top: 40px;margin-left: 30%">
                        <el-pagination
                                layout="prev, pager, next"
                                :page-size="num"
                                :total="total"
                                @current-change="findByPage"
                                :current-page="curPage"
                                background>
                        </el-pagination>
                    </el-footer>
                </el-main>

            </el-container>
        </el-container>

<!--        个人博客列表-->
        <el-dialog title="个人博客" :visible.sync="myblogFlag">
            <el-table :data="myblogs"  max-height="300">
                <el-table-column property="title" label="标题" width="150"></el-table-column>
                <el-table-column property="author" label="作者" width="100"></el-table-column>
                <el-table-column property="readvolume" label="阅读量"></el-table-column>
                <el-table-column property="review" label="评论数"></el-table-column>
                <el-table-column  fixed="right"
                                  label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="updBlog(scope.row.id)">更新博客</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>


    </div>
</body>
<script>
    Vue.filter('formateDate', function(date) {
        let d = new Date(date)
        let newstr = d.getFullYear() + "-" +
            ((d.getMonth() + 1) < 10 ? "0" + (d.getMonth() + 1) : (d.getMonth() + 1)) + "-" +
            (d.getDate() < 10 ? "0" + d.getDate() : d.getDate())
        return newstr
    })
</script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 6,//六行
            curPage:0,
            total:0,
            activeName: '1',
            activeIndex: '1',
            activeIndex2: '1',
            formLabelWidth:"90px",
            //文章搜索关键字
            condition:"",
            typeid:"",
            likes:true,
            dialogFormVisible:false,
            dialogFormVisible2:false,
            myblogFlag:false,
            // content:"",
            editor:"",
            arr:[],
            myblogs:[{}],
            user:[{}],
            topblog:[{}],
            types:[{}],
            blogs:[{}],
            blog:{
                title:""
            },
            blogContext:{
                context:{}
            },

        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            fmtdate(cellValue) {
                // 日期格式化
                let d = new Date(cellValue)
                let newstr = d.getFullYear() + "-" +
                    ((d.getMonth() + 1) < 10 ? "0" + (d.getMonth() + 1) : (d.getMonth() + 1)) + "-" +
                    (d.getDate() < 10 ? "0" + d.getDate() : d.getDate())
                return newstr
            },
            findByBlogType(pagenum){
                if (this.typeid==0)
                {
                    this.findByPage(0)
                    return
                }else
                {

                    axios.get("/public/blog/findByBlogType/"+this.typeid+"/"+this.curPage)
                        .then(resp=>{
                            this.blogs=resp.data.data.list
                            this.total = resp.data.data.total

                            this.srcchange(this.blogs)
                        })
                }

            },
            go2Back()
            {
                window.location.href="/login/index"
            },
            handleSelect(key, keyPath) {
                this.typeid=key;
            },
            findByPage(page){
                this.curPage=page
                if (this.typeid!=null&&this.typeid!=0&&this.typeid!=1)
                {
                    this.findByBlogType(page)
                }else
                {
                    var msg ={msg:"",search:0};
                    axios.post("/public/findByPage/"+page+"/"+this.num,msg).then((resp)=>{
                        this.blogs=resp.data.data.list
                        this.total = resp.data.data.total
                        this.srcchange(this.blogs)
                    })
                }

            },
            add2Blog(){
                this.blog={};
                window.location.href="/api/blog/go2AddBlog"
            },
            showContext(blogid){
                window.location.href="/public/findById/"+blogid
            },
            searchBlog(){
                   if (this.getCookie("condition")=="noSearch"){
                       if (this.condition!="")
                       {
                           axios.post("/public/findByPage/"+1+"/"+10,{msg:this.condition,search:1})
                               .then(resp=>{
                                   this.blogs=resp.data.data.list
                                   this.total = resp.data.data.total
                                   this.condition=""

                                   this.srcchange(this.blogs)
                               })
                           return
                       }
                        this.findByPage(0)
                        this.condition=""
                   }else
                   {
                       console.log(this.condition)
                       axios.post("/public/findByPage/"+1+"/"+10,{msg:this.condition,search:1})
                           .then(resp=>{
                               this.blogs=resp.data.data.list
                               this.total = resp.data.data.total
                               this.condition=""


                               this.srcchange(this.blogs)
                           })
                   }


            },
            setCookie(c_name, value,path, expiredays){
                var exdate=new Date();
                exdate.setDate(exdate.getDate() + expiredays);
                document.cookie=c_name+ "=" + value +";path="+path+";" + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
            },
            //读取cookies
            getCookie(name)
            {
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

                if (arr = document.cookie.match(reg))
                {
                    return (arr[2]);
                }
                else{
                    return null;
                }
            },

            handleCommand(command) {
                if(command=="logOut")
                {
                    window.location.href="/logOut"
                }else if(command=="add2Blog")
                {
                    this.add2Blog()
                }else if(command=="findAllBLog")
                {
                    this.findAllBlogs()
                    this.myblogFlag=true;
                }else if (command=="go2UserInfo")
                {
                    window.location.href="/user/go2MyInfo"
                }
            },
            go2Login(){
                window.location.href="/login/go2LogIn"
            },
            findAllBlogs(){
               axios.get("/api/blog/findAll")
               .then(resp=>{
                   this.myblogs=resp.data.data
               })
            },
            updBlog(id){
                this.setCookie("blogid",id,"/api/blog/go2AddBlog",1)
                window.location.href="/api/blog/go2AddBlog"
            },
            likeadd(blogid){
                axios.get("/api/rate/likeBlog/"+blogid)
                .then(resp=>{
                    this.findByPage(0)
                })
            },
            srcchange(blogs){

                for (let blog of blogs) {
                    for (let blogKey in blog)
                    {
                        if (blogKey=="id") {
                                axios.get("/api/rate/findByUserLike/"+ blog[blogKey])
                                    .then(resp => {
                                        this.arr.push({id:blog.id,flag:!resp.data.data})
                                        for (let blog of this.blogs)
                                        {
                                            for (let obj of this.arr) {
                                                if (blog.id == obj.id) {
                                                    Vue.set(blog, "likes", obj.flag)
                                                }
                                            }

                                        }
                                    })
                            // }

                        }
                    }
                }

                console.log(this.blogs)
            }
        },
        mounted(){
            this.findByPage(0)

            axios.get("/public/type/findAll")
            .then(resp=>{
                console.log(resp)
                this.types=resp.data.data;
            })

            axios.get("/public/findByCTTop/readvolume")
                .then(resp=>{
                    this.topblog = resp.data.data
                })


            var that = this;
            if (document.cookie.length>0&&document.cookie.indexOf("typeid")>=0)
            {
                // this.typeid = document.cookie.split("=")[1]
                this.typeid=this.getCookie("typeid")
                this.findByBlogType(1)
                //防止刷新页面后还在调用这个方法
                this.setCookie("typeid",0,"/login/index",1)
            }else if (document.cookie.length>0&&document.cookie.indexOf("condition")>=0) {
                console.log(123)
                this.searchBlog();
                this.setCookie("condition","noSearch","/login/index",1)
            }




        }
    })
</script>
</html>